<template>
    <div class="content">
        <TableLayout form-title="">
        <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" :rules="rules" ref="formInline" label-width="90px"  slot="form">          
                <el-row :gutter="41">
                      <el-col :span="8" v-if="schoolType == 0">
                        <el-form-item label="年级" prop="gradeId">
                             <grade v-model="formInline.gradeId"></grade>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级" prop="classId">
                             <getclass v-model="formInline.classId" :grade='formInline.gradeId'></getclass>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8"> 
                        <el-button type="primary" @click="onSubmit('formInline')">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
            </div>
            <el-table :data="dataApply" style="width: 100%" border 
            v-loading="loading" ref="multipleTable">
                <el-table-column label="班级" prop="className" align="center"></el-table-column>
                <el-table-column  align="center" :label="rating[1].term+'（'+rating[1].score+'）'" v-if="rating[1]&&rating[1].term!=='last'">
                    <template scope="scope">
                         {{scope.row.scoreOne|| '--'}}
                    </template>
                </el-table-column>
                <el-table-column  align="center" :label="rating[2].term+'（'+rating[2].score+'）'" v-if="rating[2]&&rating[2].term!=='last'">
                    <template scope="scope">
                           {{scope.row.scoreTwo|| '--'}}
                    </template>
                </el-table-column>
                <el-table-column  align="center" :label="rating[3].term+'（'+rating[3].score+'）'" v-if="rating[3]&&rating[3].term!=='last'">
                    <template scope="scope">
                           {{scope.row.scoreThree|| '--'}}
                    </template>
                </el-table-column>
                <el-table-column  align="center" :label="rating[4].term+'（'+rating[4].score+'）'" v-if="rating[4]&&rating[4].term!=='last'">
                    <template scope="scope">
                          {{scope.row.scoreFour|| '--'}}
                    </template>
                </el-table-column>
                <el-table-column  align="center" :label="rating[5].term+'（'+rating[5].score+'）'" v-if="rating[5]&&rating[5].term!=='last'">
                    <template scope="scope">
                         {{scope.row.scoreFive || '--'}}
                    </template>
                </el-table-column>
                <el-table-column  align="center" :label="rating[6].term+'（'+rating[6].score+'）'" v-if="rating[6]&&rating[6].term!=='last'">
                    <template scope="scope">
                         {{scope.row.scoreSix || '--'}}
                    </template>
                </el-table-column>
                 <el-table-column  align="center" :label="rating[rating.length-1].score" 
                 v-if="rating[1]&&rating[1].term!=='last'">
                    <template scope="scope">
                         {{scope.row.totalScore|| '--'}}
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import {getScoreHeader, classPageScore } from 'api/wisdom';
import TableLayout from 'components/TableLayout';
import school from 'components/SchoolClasss/school';
import { mapState, mapActions, mapGetters } from 'vuex';
import grade from 'components/SchoolClasss/grade';
import getclass from 'components/SchoolClasss/class1';
export default{
    components: {TableLayout, school, grade, getclass},
    data() {
        return {
            formInline: {// form表单数据
                classId: '',
                ratingData: '', // 评比日期
                schoolName: '',
                className: '',
                gradeId: ''
            },
            classArr: [], // 班级数组 传给子组件表格的表身
            rating: [], // table表头name
            dataApply: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: true,
            rules: {
                ratingData: [
                    { required: true, type: 'date', message: '请选择评选日期', trigger: 'change' }
                ]
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters([
            'schoolId',
            'schoolType'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchDataHead();
        }
    },
    // 初始化
    created() {
        this.searchFetchDataHead();
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 查询列表head
        searchFetchDataHead() {
            this.loading = true;
            let json={
                fSchoolId: this.schoolId,
                ratingTime: this.$route.params.id.substring(0, 19)
            }
            getScoreHeader(json).then(response => {  
                this.rating=[];   
                if (response.data.content) {
                    this.rating = [{term: '班级'}];// this.rating是表头 表头第一项没id
                    if (response.data.content[0].termOne) {
                        let obj = {
                            score: response.data.content[0].scoreOne,
                            term: response.data.content[0].termOne
                        }
                        this.rating.push(obj)
                    }
                    if (response.data.content[0].termTwo) {
                        let obj = {
                            score: response.data.content[0].scoreTwo,
                            term: response.data.content[0].termTwo
                        }
                        this.rating.push(obj)
                    }
                    if (response.data.content[0].termThree) {
                        let obj = {
                            score: response.data.content[0].scoreThree,
                            term: response.data.content[0].termThree
                        }
                        this.rating.push(obj)
                    }
                    if (response.data.content[0].termFour) {
                        let obj = {
                            score: response.data.content[0].scoreFour,
                            term: response.data.content[0].termFour
                        }
                        this.rating.push(obj)
                    }
                    if (response.data.content[0].termFive) {
                        let obj = {
                            score: response.data.content[0].scoreFive,
                            term: response.data.content[0].termFive
                        }
                        this.rating.push(obj)
                    }
                    if (response.data.content[0].termSix) {
                        let obj = {
                            score: response.data.content[0].scoreSix,
                            term: response.data.content[0].termSix
                        }
                        this.rating.push(obj)
                    }
                    this.rating.push({term: 'last', score: response.data.content[0].totalScore})
                    this.searchFetchData();// 表身
                } 
            })
        },
       
        // 查询列表 表身
        searchFetchData() {
            let json={
                page: this.listQuery.page,
                rows: this.config.pageSize,
                fSchoolId: this.schoolId,
                fClassId: this.formInline.classId,
                gradeId: this.formInline.gradeId,
                ratingTime: this.$route.params.id.substring(0, 19)
            }
            classPageScore(json).then(response => {
                this.classArr=[];
                this.loading = false;
                if (response.data.content) {
                    this.dataApply=response.data.content.list
                    this.listQuery.total = response.data.content.pagination.total;
                }          
            }).catch(() => {
                this.loading = false;
            });
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchDataHead();
        },
        handleCurrentChange(val) {            
            this.listQuery.page = val;
            this.searchFetchDataHead();
        },
        // 表单查询
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.searchFetchDataHead();
                }
            });
        }
        // edit(row) {
        //     this.dataForm.dialog = true;
        //     this.dataForm.fClassId = row.classId;
        //     this.dataForm.sClassName = row.className;
        //     this.$refs.editRating.getRating();
        // },
        // modifyRating() {
        //     this.$router.push('/classScore/ratingSetting'); 
        // }

    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .btnPosition {
        float:right;
    }
}
</style>